<template>
	<view class="question_message">
		<template v-if="seedMode">
			<textarea placeholder-style="color:#A6A6A6" :maxlength="200"
			 placeholder="请输入你的问题，200字以内" v-model="model.message" />
			<input type="text" placeholder="输入手机号或者微信号" v-model="model.phone" />
			<view class="btnBox">
				<view class="btn" @tap="format">
					提交问题
				</view>
			</view>
		</template>
		<template v-else>
			<view class="successBox">
				<view class="success_title">提交成功</view>
				<view class="success_icon_box">
					<image class="success_icon" src="../../static/my/successful.png"></image>
				</view>
				<view class="success_text1">我们会根据您的反馈及时给您处理</view>
				<view class="success_text2">如果您有问题，可以添加我们的客服进行反馈</view>
				<!-- <view class="success_text3">客服微信：1234556</view> -->
				<!-- <view class="success_text3">客户电话：12344556</view> -->
				<view class="success_text3">联系邮箱：hefeijihao@aliyun.com</view>
				<view class="success_text3">在线时间：9:00-17:30</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const seedMode = ref(true);
	const model = ref({
		message: '',
		phone: ''
	})
	function format() {
		if(!model.value.message.trim()) {
			uni.showToast({
				title: '请输入具体问题情况',
				icon: 'none',
				mask: true
			})
			return
		}
		if(!model.value.phone.trim()) {
			uni.showToast({
				title: '请输入联系方式',
				icon: 'none',
				mask: true
			})
			return
		}
		formatMessage(model.value);
	}
	// 提交问题
	function formatMessage(data) {
		uni.showLoading({
			title: '加载中',
			mask: false
		})
		uni.$request('/api/user/message/add', data).then((res)=>{
			if(res.status == 200) {
				seedMode.value = false;
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
			}else {
				uni.showToast({
					icon: 'error',
					title: '提交失败'
				})
			}
			uni.hideLoading();
		}).fail((err)=>{
			uni.hideLoading();
			uni.showToast({
				icon: 'error',
				title: '延迟请重试！'
			})
		})
	}
	
</script>

<style lang="less" scoped>
.question_message {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 40rpx 32rpx;
	box-sizing: border-box;
	textarea {
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 32rpx;
		width: 100%;
		height: 348rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}
	input {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: #ffffff;
		margin-top: 40rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
	}
}
.btnBox {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40rpx;
}
.btn {
	width: 333rpx;
	border-radius: 200rpx;
	background: rgba(69, 145, 230, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32rpx 0 32rpx;
	font-size: 32rpx;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 48rpx;
	color: #ffffff;
}
.successBox {
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 32rpx;
	box-shadow: 0 2rpx 4rpx  rgba(0, 0, 0, 0.02);
}
.success_title {
	margin-bottom: 50rpx;
	text-align: center;
	font-size: 40rpx;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 58rpx;
	color: rgba(56, 56, 56, 1);
}
.success_icon_box {
	margin-bottom: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.success_icon {
	width: 100rpx;
	height: 100rpx;
}
.success_text1 {
	margin-bottom: 40rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 24.5rpx;
	color: rgba(56, 56, 56, 1);
}
.success_text2 {
	text-align: center;
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 40.5rpx;
	color: rgba(56, 56, 56, 1);
}
.success_text3 {
	text-align: center;
	margin-top: 12rpx;
	font-size: 28rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 40.5rpx;
	color: rgba(166, 166, 166, 1);
}
</style>
